/* 
    Document   : style
    Created on : Oct 9, 2011, 7:40:21 PM
    Author     : Twitter Debate, v0.0
    By Christopher Blair, Patrick McAuliffe, Balasaheb Bagul, Jane Janeczko, and Michael Madaus
    EECS 338 Practicum in Intelligent Information Systems (Fall 2011)

    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}

body {
    margin:0;
    padding:0;
    width:100%;
    color:#959595;
    font-size: 100%;
    font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
}

html, .main { 
    padding:0;
    margin:0;
    background:#fff;
}

.clr {
    clear:both;
    padding:0;
    margin:0;
    width:100%;
    font-size:0px;
    line-height:0px;
}

.title {
    background-color:lightGrey;
    color:grey;
    width: 100%;
    padding-top: 35px;
    padding-bottom: 25px;
    font-size: 50px;
}

.container {
    width: 100%;
}

.choiceContainer {
    width: 100%;
    padding-top: 0px;
    background-color: #31C3E7;
    height: 250px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

.titleElement {
    width: 33%;
    float: left;
    text-align: center;
}

.tweetsContainer {
    clear: left;
}

.imagesLeft {
    width: 20%;
}

.imagesRight {
    width: 20%;
}

.tweetsLeft {
    width: 30%;
}

.tweetsRight {
    width: 30%
}

.tweetCell {
    border-bottom: 1px solid lightGrey;
    margin-bottom: 5px;
}

td.leftCell {
    background-color: #FFF0AA;
    color: black;
    border-bottom: 1px solid lightGrey;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 25px;
    box-shadow:5px 10px 20px lightGrey
}

td.rightCell {
    background-color: lightgrey;
    color: black;
    border-bottom: 1px solid lightGrey;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 25px;
    box-shadow:2px 10px 20px lightGrey
}

.moreLink {
    float: right;
    font-size: 25px;
    cursor: pointer;
    background-color: #31C3E7;
    color: white;
    height: 30px;
    line-height: 25px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    width: 160px;
    margin-top: 25px;
    box-shadow: 5px 5px 10px lightgrey;
}

.scoreLink {
    float: left;
    font-size: 25px;
    cursor: pointer;
    background-color: #31C3E7;
    color: white;
    height: 30px;
    line-height: 25px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    width: 160px;
    margin-top: 25px;
    box-shadow: 5px 5px 10px lightgrey;
}

.scoreContainer {
    font-size: 14px;
    font-style: italic;
    display: none;
}

/*--------------------------*/
/* for the top pics */
div.containermittstweets {
    background-color: #fff;
    height: 95px;
    float:left;
}

div.mittstweets
{
    float:left;
    width:75%;
    background-color: #99ED9C;
    color: black;
    border-bottom: 1px solid lightGrey;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 25px;
}

div.containerbarackstweets {
    background-color: #fff;
    height: 95px;
    float:right;
}

div.barackstweets
{
    float:right;
    width:75%;
    background-color: #B8B8B8;
    color: black;
    border-bottom: 1px solid lightGrey;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 25px;
}

div.account
{
    color:black;
    font:normal 10px/1.8em Arial, Helvetica, sans-serif;
}
div.date
{
    color:black;
    font:normal 10px/1.8em Arial, Helvetica, sans-serif;
    text-align:right;
}

.titleImgContainer {
    width:100%;
    height:135px;
    text-align:center;
}

.titleImg {
    height: 125px;
    border: 5px solid lightgrey;
    border-radius: 10px;
}

div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.img a:hover img {
    border: 0px solid #0000ff;
}

div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
